<template>
  <div class="reader-box">
    <div class="chapter-scroller-wrap">
      <van-list
        offset="2"
        immediate-check
        v-model="loading"
        :finished="loadFinished"
        finished-text="没有更多了"
        :error.sync="loadError"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <!-- <van-cell
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          v-for="item in chapters"
          :key="item.index"
          :title="item"
        /> -->
        <div class="van-clearfix">
          <ul class="chapter-content-wrapper">
            <li
              v-for="(item, index) in chapters"
              :key="index"
              class="chapter-content-item"
            >
              <h4 class="chapter-content-title">{{ item.name }}</h4>
              <div class="chapter-content-content" v-html="item.content"></div>
            </li>
          </ul>
        </div>
      </van-list>
      <!-- <cube-scroll
        ref="contentScroll"
        :data="chapters"
        :options="options"
        @pulling-up="onPullingUp"
      >
        <ul class="chapter-content-wrapper">
          <li
            v-for="(item, index) in chapters"
            :key="index"
            class="chapter-content-item"
          >
            <h4 class="chapter-content-title">{{ item.chapterTitle }}</h4>
            <div
              class="chapter-content-content"
              v-html="item.chapterContent"
            ></div>
          </li>
        </ul>
      </cube-scroll> -->
    </div>
  </div>
</template>

<script>
import api from '@/fetch/api.js'
// import mock from '@/mock/chapters.json'

// const mockChapters = []

function replaceContent (chapter) {
  chapter.content = chapter.content.replace(/ /g, '<p>')
}

// mock.chapters.forEach(item => {
//   replaceContent(item)
//   mockChapters.push(item)
// })

export default {
  data () {
    return {
      chapters: [],
      loading: true,
      loadFinished: false,
      loadError: false,
      catalog: [],
      currentChapter: '',
      nextIndex: 0,
      nextChapter: ''
    }
  },
  mounted () {
    console.log(this.$route.query.bookCode)
    let param = {
      anaBookCode: this.$route.query.bookCode,
      origin: 'bqb'
    }
    this.searchCatalog(param)
    // TODO 加载目录，阅读历史，个性化设置
  },
  methods: {
    searchReadPoint (param) {
      api.readPoint(param).then(response => {
        if (response.status === 200) {
          if (response.data.code === 200) {
            this.nextChapter = response.data.data
            for (let i = 0; i < this.catalog.length; i++) {
              const c = this.catalog[i]
              if (this.nextChapter === c.code) {
                this.nextIndex = i
              }
            }
            this.onLoad()
          } else {
            console.log(response.data.message)
          }
        } else {
          console.log('request error')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    searchCatalog (searchCatalogParam) {
      api.searchCatalog(searchCatalogParam).then((response) => {
        if (response.status === 200) {
          if (response.data.code === 200) {
            this.catalog = response.data.data.chapters
            this.searchReadPoint({ anaBookCode: this.$route.query.bookCode })
          } else {
            console.log(response.data.message)
          }
        } else {
          console.log('request error')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onLoad () {
      let finish = false
      let param = {
        anaBookChapterCode: this.catalog[this.nextIndex].code,
        origin: 'bqb'
      }
      api.searchChapter(param).then((response) => {
        console.log(response)
        if (response.status === 200) {
          if (response.data.code === 200) {
            replaceContent(response.data.data)
            this.chapters.push(response.data.data)
            this.nextIndex = this.nextIndex + 1
          } else if (response.data.code === 204) {
            finish = true
          }
        }
        // 加载状态结束
        this.loading = false
      }).catch((err) => {
        console.log(err)
        // 加载状态结束
        this.loading = false
        this.loadError = true
      })

      console.log(this.catalog.length)
      // 数据全部加载完成
      if (finish || this.nextIndex > this.catalog.length) {
        this.loadFinished = true
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.world-reader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.chapter-scroller-wrap {
  position: absolute;
  width: 98%;
  height: 98%;
  top: 1%;
  left: 1%;
}

.chapter-content-item .chapter-content-title {
  font-size: 25px;
  margin-bottom: 15px;
  margin-top: 20px;
}

.chapter-content-item .chapter-content-content {
  text-align: left;
  text-indent: 2em;
  line-height: 23px;
}

.chapter-content-item .chapter-content-content /deep/ p {
  margin-top: 15px;
}
</style>
